<template>
  <div class="login">
    <div class="login-container">
      <div class="login-box">
        <div class="login-header">
          <img src="../../assets/image/logo.png" class="logo-image">
          <span>欢迎使用旅游信息推荐系统</span>
    </div>
        <div class="login-form">
          <el-input 
            prefix-icon="el-icon-user" 
            v-model="loginAccount" 
            placeholder="请输入登录账号"
            class="login-input"
          ></el-input>
          <el-input 
            prefix-icon="el-icon-star-off" 
            type="password" 
            v-model="password" 
            placeholder="请输入用户密码"
            class="login-input"
          ></el-input>
          <el-button class="login-button" type="primary" @click="login">登 录</el-button>
          <el-button class="register-button" @click="toRegister">注 册</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {login,getUser} from '../../api/api'
  export default {
    data() {
      return{
        loginAccount: "",
        password: "",
      }
    },
    methods: {
        toRegister() {
          this.$router.push("/register")
        },
        login() {
            if(!this.loginAccount) {
                this.$message({
                    message: '请输入用户名',
                    type: 'warning'
                });
                return;
            }
            if(!this.password) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return;
            }
            var params = {
                loginAccount: this.loginAccount,
                password: this.password
            }
            login(params).then(res => {
                if(res.code == 1000) {
                    this.$message({
                        message: '登陆成功',
                        type: 'success'
                    });
                    var that = this
                    var token = res.data.token
                    window.localStorage.setItem("user_token",token)
                    this.getUserInfo()
                    setTimeout(function() {
                        that.$router.push("/")
                    },500)
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        getUserInfo() {
            getUser().then(res => {
                if(res.code == 1000) {
                    window.localStorage.setItem("user_info",JSON.stringify(res.data))
                }
            })
        },
    },
    created() {

    },
    mounted() {

    }
 }
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/image/image\ 2.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
}

.login-box {
  width: 400px;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo-image {
  width: 60px;
  margin-bottom: 15px;
}

.login-header span {
  display: block;
  color: #d37136;
  font-size: 24px;
  font-weight: bold;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-input {
  height: 45px;
}

.login-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid rgba(211, 113, 54, 0.2);
}

.login-button, .register-button {
  height: 45px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
}

.login-button {
  background: linear-gradient(135deg, #d37136, #ff8c42);
  border: none;
}

.login-button:hover {
  background: linear-gradient(135deg, #ff8c42, #d37136);
}

.register-button {
  background: transparent;
  border: 2px solid #d37136;
  color: #d37136;
}

.register-button:hover {
  background: rgba(211, 113, 54, 0.1);
}
</style>
